<template>
  <div class="account-info-container">
    <div class="header">
      <!--返回-->
      <span class="back-icon" @click="goBack()"> < </span>
      <span class="title">账户信息</span>
      <span class="logout-account">注销账户</span>
    </div>
    <div class="info-item">
      <!--头像 且点击弹出弹框-->
      <span class="label">头像</span>
      <img v-if="imageUrl" :src="imageUrl" v-lazy @click="showModal()" />
      <img
        v-else
        src="https://img2.baidu.com/it/u=2416806023,1983653270&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
        @click="showModal()"
      />
      <span class="edit-icon" style="line-height: 100px">></span>
    </div>
    <div class="info-item">
      <!--昵称-->
      <span class="label">昵称</span>
      <span class="value">Douman</span>
      <span class="edit-icon" @click="editNickname()">></span>
    </div>
    <div class="info-item">
      <!--手机号-->
      <span class="label">手机号</span>
      <span class="value">{{ phone }}</span>
      <span v-if="phone" class="edit-icon" @click="bindPhone()">></span>
      <span v-else @click="bindPhone()">点击绑定</span>
    </div>
    <!--点击头像操作-->
    <div class="upload-photo-popup-container">
      <div class="modal-overlay" id="modal-overlay">
        <div class="modal-close" id="modal-close">
          <img src="../../img/close-icon.png" />
        </div>
      </div>
      <div class="modal-content" id="modal-content">
        <!-- 弹框内容，如预设头像、拍照按钮、取消按钮等 -->
        <div class="popup-mask">
          <div class="popup-content">
            <div class="popup-header">
              <span class="popup-title">上传照片</span>
            </div>
            <div class="popup-options" @click="getphoto()">
              <video
                id="camera-video"
                autoplay
                playsinline
                style="width: 300px; height: 200px"
              ></video>
              <button class="take-photo-button" @click="addphoto()">
                <img src="../../img/camera-icon.png" />
                拍照
              </button>
              <canvas id="canvas" style="width: 300px; height: 100px"></canvas>
              <a id="downloadLink" download="captured-photo.jpg" href="#">下载照片</a>
              <button class="choose-from-album-button" @click="checke()">
                <img src="../../img/album-icon.png" />
                从相册中选取
              </button>
              <button class="cancel-button" @click="hideModal()" id="cancel-button">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 获取用户手机号
const phone = localStorage.getItem('phone')
// 头像
const imageUrl = ref(localStorage.getItem('imageUrl'))
// 用户信息
const userInfo = {
  avatar: localStorage.getItem('userInfo.avatar')
}
// 相机
const getphoto = () => {
  // 获取摄像头视频流并显示在video元素中
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // 使用getUserMedia获取摄像头视频流并显示在video元素中
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then(function (stream: any) {
        // 成功获取视频流后，将视频流设置为video元素的源并播放视频
        const video = document.getElementById('camera-video')
        // 将视频流设置为video元素的源并播放视频
        video.srcObject = stream
        // 播放视频，默认情况下会自动播放
        video.play()
      })
      .catch(function (error) {
        if (error.name === 'NotAllowedError') {
          // 处理用户拒绝访问摄像头的情况
          console.log('用户拒绝了摄像头权限，请在浏览器设置中允许访问摄像头')
        } else {
          // 处理其他错误情况
          console.log('获取摄像头视频流出现其他错误: ', error)
        }
      })
  } else {
    // 如果浏览器不支持getUserMedia API，则提示用户此浏览器不支持访问相机
    console.log('此浏览器不支持访问相机')
  }
}
//从本地选择图片
const checke = () => {
  // 创建一个input元素用于选择文件
  const input = document.createElement('input')
  // 设置input元素的类型为文件选择器
  input.type = 'file'
  // 设置文件类型为图片类型
  input.accept = 'image/*'
  // 设置文件选择后的回调函数
  input.onchange = () => {
    // 获取用户选择的文件对象
    const file = input.files[0]
    console.log(file)
    // 判断是否选择了文件
    if (file) {
      // 创建一个URL对象，用于显示图片预览
      imageUrl.value = URL.createObjectURL(file)
      // 隐藏弹框
      hideModal()
      // 更新本地存储中的头像URL
      localStorage.setItem('userInfo.avatar', imageUrl.value)
    }
  }
  // 触发input的点击事件，弹出文件选择对话框
  input.click()
}
// 返回
const goBack = () => {
  router.go(-1)
}
// 编辑昵称
const editNickname = () => {
  router.push('/changename')
}
// 绑定手机号
const bindPhone = () => {
  localStorage.setItem('phone', '13620610416')
  console.log(localStorage.getItem('phone'))
}
// 显示头像操作弹框
const showModal = () => {
  // 显示弹框元素
  document.getElementById('modal-overlay').style.display = 'block'
  // 显示弹框内容元素
  document.getElementById('modal-content').style.display = 'block'
}
// 隐藏头像操作弹框
const hideModal = () => {
  // 隐藏弹框元素
  document.getElementById('modal-overlay').style.display = 'none'
  // 隐藏弹框内容元素
  document.getElementById('modal-content').style.display = 'none'
}
const addphoto = () => {
  // 获取视频元素和canvas元素
  const video = document.getElementById('camera-video')
  const canvas = document.getElementById('canvas')
  // 获取canvas的绘图上下文并绘制视频帧到画布上
  const ctx = canvas.getContext('2d')
  console.log(ctx)
  // 将视频帧绘制到画布上，并设置画布的宽高为视频的宽高
  ctx.drawImage(video, 0, 0, canvas.width, (canvas.height = video.videoHeight))
  // 将画布内容转换为DataURL格式，以便保存为图片文件
  const dataURL = canvas.toDataURL('image/jpeg')
  // 获取下载链接元素并设置其href属性为该DataURL
  const downloadLink = document.getElementById('downloadLink')
  // 设置下载链接的href属性为该DataURL 并触发下载链接的点击事件以保存图片到本地
  downloadLink.href = dataURL
  downloadLink.click()
  // 更新本地存储中的头像URL
  imageUrl.value = dataURL
  hideModal()
  localStorage.setItem('imageUrl', imageUrl.value)
}
</script>
<style>
body {
  width: 100%;
  height: 100vh;
  background-color: #f1f1f1;
}
.account-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.back-icon {
  padding: 10px;
  cursor: pointer;
  color: #77d8a3;
}
.title {
  text-align: center;
  flex: 1;
  line-height: 44px;
  margin-left: 50px;
}
.logout-account {
  padding: 10px;
  cursor: pointer;
  line-height: 24px;
  color: #77d8a3;
}
.avatar-section {
  margin-bottom: 20px;
}
.avatar-section img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.info-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  line-height: 40px;
  margin-bottom: 10px;
  background: white;
}
.info-item img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 20px;
}
.label {
  flex: 0.5;
  margin-left: 24px;
}
.value {
  flex: 0.3;
}
.edit-icon {
  cursor: pointer;
}
.upload-photo-popup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.upload-photo-popup-container img {
  width: 20px;
  height: 20px;
}

.popup-header {
  width: 100%;
  margin-bottom: 20px;
}
.popup-title {
  text-align: center;
  font-size: 18px;
  line-height: 60px;
}
.popup-options {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-options button {
  width: 350px;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  height: 50px;
  margin-top: 30px;
}
.take-photo-button {
  background-color: green;
  color: white;
}
.choose-from-album-button {
  background-color: green;
  color: white;
}
.cancel-button {
  background-color: lightgray;
}
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
  position: fixed;
  top: 410px;
  left: 206px;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 0px;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 90%;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
</style>
